import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import axios from 'axios';
import { Search, Plus, Edit, Trash2, Save, Upload, Image, Info, ChevronLeft, ChevronRight } from 'lucide-react';
import { Dialog, DialogContent, DialogTitle, Button, Input, TextareaAutosize } from '@mui/material';
import logger from '../../../utils/logger';

// 样式组件
const Container = styled.div`
  padding: 24px;
  background-color: #f8fafc;
  min-height: 100vh;
`;

const PageTitle = styled.h1`
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 24px;
`;

const ControlsBar = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
`;

const SearchBar = styled.div`
  display: flex;
  align-items: center;
  background: white;
  border-radius: 8px;
  padding: 8px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  flex: 1;
`;

const SearchInput = styled.input`
  border: none;
  outline: none;
  flex: 1;
  margin-left: 8px;
  font-size: 14px;
  color: #334155;
`;

const ActionButton = styled.button`
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  
  ${({ variant }) => {
    switch (variant) {
      case 'primary':
        return `
          background-color: #8b5cf6;
          color: white;
          
          &:hover {
            background-color: #7c3aed;
            transform: translateY(-1px);
          }
        `;
      case 'secondary':
        return `
          background-color: #f3f4f6;
          color: #374151;
          
          &:hover {
            background-color: #e5e7eb;
          }
        `;
      case 'danger':
        return `
          background-color: #ef4444;
          color: white;
          
          &:hover {
            background-color: #dc2626;
          }
        `;
      default:
        return '';
    }
  }}
`;

const CardGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
`;

const TarotCard = styled.div`
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
`;

const CardImageContainer = styled.div`
  height: 200px;
  overflow: hidden;
  background-color: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const CardImage = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  
  ${TarotCard}:hover & {
    transform: scale(1.05);
  }
`;

const CardContent = styled.div`
  padding: 16px;
`;

const CardTitle = styled.h3`
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
`;

const CardDescription = styled.p`
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
`;

const CardMeta = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 12px;
  color: #94a3b8;
`;

const CardActions = styled.div`
  display: flex;
  justify-content: flex-end;
  gap: 8px;
`;

const Pagination = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
`;

const PageButton = styled.button`
  width: 36px;
  height: 36px;
  border: 1px solid #e2e8f0;
  background: ${props => props.active ? '#8b5cf6' : 'white'};
  color: ${props => props.active ? 'white' : '#64748b'};
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
  
  &:hover:not(:disabled) {
    background: ${props => props.active ? '#7c3aed' : '#f8fafc'};
    border-color: ${props => props.active ? '#7c3aed' : '#cbd5e1'};
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
`;

const ImageUploader = styled.div`
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background-color: #f9fafb;
  
  &:hover {
    border-color: #8b5cf6;
    background-color: #f5f3ff;
  }
`;

const ImageUploaderIcon = styled.div`
  font-size: 32px;
  color: #94a3b8;
  margin-bottom: 12px;
`;

const ImageUploaderText = styled.p`
  font-size: 14px;
  color: #64748b;
  margin: 0;
`;

const TarotManagement = () => {
  // 页面加载时记录访问日志
  useEffect(() => {
    logger.info('进入塔罗牌管理页面');
  }, []);
  // 状态管理
  const [tarotCards, setTarotCards] = useState([]);
  const [filteredCards, setFilteredCards] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [loading, setLoading] = useState(true);
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
  const [currentCard, setCurrentCard] = useState(null);
  const [currentPage, setCurrentPage] = useState(1);
  const [cardsPerPage] = useState(8);
  const [formData, setFormData] = useState({
    name: '',
    type: '',
    meaning: '',
    reversedMeaning: '',
    description: '',
    imageUrl: ''
  });
  const [previewImage, setPreviewImage] = useState(null);
  
  // 模拟数据加载
  useEffect(() => {
    // 记录进入页面
    logger.info('进入塔罗牌管理页面');
    
    const loadTarotCards = async () => {
      try {
        // 在实际应用中，这里应该从API获取数据
        // const response = await axios.get('/api/tarot/cards');
        // setTarotCards(response.data);
        
        // 模拟塔罗牌数据
        const mockData = [
          {
            id: 1,
            name: '魔术师',
            type: '大阿卡那',
            meaning: '创造力、意志力、行动力',
            reversedMeaning: '缺乏方向、优柔寡断',
            description: '魔术师代表着无限的可能性和创造力，象征着将想法转化为现实的能力。',
            imageUrl: 'https://via.placeholder.com/600x400?text=The+Magician',
            createdAt: '2023-10-01',
            updatedAt: '2023-10-01'
          },
          {
            id: 2,
            name: '女祭司',
            type: '大阿卡那',
            meaning: '直觉、神秘、内在智慧',
            reversedMeaning: '直觉被忽略、缺乏洞察力',
            description: '女祭司象征着内在的智慧和直觉，代表着潜意识和神秘的力量。',
            imageUrl: 'https://via.placeholder.com/600x400?text=The+High+Priestess',
            createdAt: '2023-10-01',
            updatedAt: '2023-10-01'
          },
          {
            id: 3,
            name: '皇后',
            type: '大阿卡那',
            meaning: '丰饶、母性、创造力',
            reversedMeaning: '过度放纵、缺乏自律',
            description: '皇后代表着丰饶、母性和创造力，象征着自然的循环和生命的力量。',
            imageUrl: 'https://via.placeholder.com/600x400?text=The+Empress',
            createdAt: '2023-10-01',
            updatedAt: '2023-10-01'
          },
          {
            id: 4,
            name: '皇帝',
            type: '大阿卡那',
            meaning: '权威、结构、领导力',
            reversedMeaning: '专制、僵化、缺乏灵活性',
            description: '皇帝象征着权威、结构和领导力，代表着秩序和稳定的力量。',
            imageUrl: 'https://via.placeholder.com/600x400?text=The+Emperor',
            createdAt: '2023-10-01',
            updatedAt: '2023-10-01'
          },
          {
            id: 5,
            name: '教皇',
            type: '大阿卡那',
            meaning: '传统、指导、精神指引',
            reversedMeaning: '教条主义、盲目服从',
            description: '教皇象征着传统、指导和精神指引，代表着信仰和道德准则。',
            imageUrl: 'https://via.placeholder.com/600x400?text=The+Hierophant',
            createdAt: '2023-10-01',
            updatedAt: '2023-10-01'
          },
          {
            id: 6,
            name: '恋人',
            type: '大阿卡那',
            meaning: '爱情、选择、和谐',
            reversedMeaning: '选择困难、关系不和谐',
            description: '恋人象征着爱情、选择和和谐，代表着连接和关系的力量。',
            imageUrl: 'https://via.placeholder.com/600x400?text=The+Lovers',
            createdAt: '2023-10-01',
            updatedAt: '2023-10-01'
          },
          {
            id: 7,
            name: '战车',
            type: '大阿卡那',
            meaning: '胜利、控制、意志力',
            reversedMeaning: '失控、缺乏方向',
            description: '战车象征着胜利、控制和意志力，代表着克服障碍的力量。',
            imageUrl: 'https://via.placeholder.com/600x400?text=The+Chariot',
            createdAt: '2023-10-01',
            updatedAt: '2023-10-01'
          },
          {
            id: 8,
            name: '力量',
            type: '大阿卡那',
            meaning: '勇气、力量、耐心',
            reversedMeaning: '软弱、缺乏耐心',
            description: '力量象征着内在的勇气和力量，代表着控制和平衡的力量。',
            imageUrl: 'https://via.placeholder.com/600x400?text=Strength',
            createdAt: '2023-10-01',
            updatedAt: '2023-10-01'
          },
          {
            id: 9,
            name: '隐者',
            type: '大阿卡那',
            meaning: '内省、智慧、孤独',
            reversedMeaning: '孤立、过度思考',
            description: '隐者象征着内省、智慧和孤独，代表着寻求内在真理的旅程。',
            imageUrl: 'https://via.placeholder.com/600x400?text=The+Hermit',
            createdAt: '2023-10-01',
            updatedAt: '2023-10-01'
          },
          {
            id: 10,
            name: '命运之轮',
            type: '大阿卡那',
            meaning: '变化、命运、循环',
            reversedMeaning: '停滞、抵抗变化',
            description: '命运之轮象征着生活的循环和变化，代表着命运的力量。',
            imageUrl: 'https://via.placeholder.com/600x400?text=Wheel+of+Fortune',
            createdAt: '2023-10-01',
            updatedAt: '2023-10-01'
          }
        ];
        
        setTarotCards(mockData);
        setFilteredCards(mockData);
      } catch (error) {
        console.error('加载塔罗牌数据失败:', error);
      } finally {
        setLoading(false);
      }
    };
    
    loadTarotCards();
  }, []);
  
  // 搜索过滤功能
  useEffect(() => {
    if (searchTerm === '') {
      setFilteredCards(tarotCards);
    } else {
      const filtered = tarotCards.filter(card => 
        card.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        card.type.toLowerCase().includes(searchTerm.toLowerCase()) ||
        card.meaning.toLowerCase().includes(searchTerm.toLowerCase())
      );
      setFilteredCards(filtered);
    }
    setCurrentPage(1); // 重置到第一页
  }, [searchTerm, tarotCards]);
  
  // 分页逻辑
  const indexOfLastCard = currentPage * cardsPerPage;
  const indexOfFirstCard = indexOfLastCard - cardsPerPage;
  const currentCards = filteredCards.slice(indexOfFirstCard, indexOfLastCard);
  const totalPages = Math.ceil(filteredCards.length / cardsPerPage);
  
  // 处理表单输入变化
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };
  
  // 处理文件上传
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setPreviewImage(reader.result);
        // 在实际应用中，这里应该上传文件到服务器
        // 这里简单使用base64作为模拟
        setFormData(prev => ({
          ...prev,
          imageUrl: reader.result
        }));
      };
      reader.readAsDataURL(file);
    }
  };
  
  // 打开添加对话框
  const handleAddClick = () => {
    setFormData({
      name: '',
      type: '',
      meaning: '',
      reversedMeaning: '',
      description: '',
      imageUrl: ''
    });
    setPreviewImage(null);
    setIsAddDialogOpen(true);
  };
  
  // 打开编辑对话框
  const handleEditClick = (card) => {
    setCurrentCard(card);
    setFormData({
      name: card.name,
      type: card.type,
      meaning: card.meaning,
      reversedMeaning: card.reversedMeaning,
      description: card.description,
      imageUrl: card.imageUrl
    });
    setPreviewImage(card.imageUrl);
    setIsEditDialogOpen(true);
  };
  
  // 处理删除
  const handleDelete = (id) => {
    if (window.confirm('确定要删除这张塔罗牌吗？')) {
      // 记录删除塔罗牌操作
      logger.info('删除塔罗牌', { id });
      
      // 在实际应用中，这里应该调用API删除数据
      // axios.delete(`/api/tarot/cards/${id}`);
      setTarotCards(prev => prev.filter(card => card.id !== id));
    }
  };
  
  // 处理添加保存
  const handleAddSave = () => {
    // 记录添加塔罗牌操作
    logger.info('添加塔罗牌', { name: formData.name, type: formData.type });
    
    // 在实际应用中，这里应该调用API添加数据
    // axios.post('/api/tarot/cards', formData);
    const newCard = {
      id: tarotCards.length + 1,
      ...formData,
      createdAt: new Date().toISOString().split('T')[0],
      updatedAt: new Date().toISOString().split('T')[0]
    };
    setTarotCards(prev => [...prev, newCard]);
    setIsAddDialogOpen(false);
  };
  
  // 处理编辑保存
  const handleEditSave = () => {
    // 记录编辑塔罗牌操作
    logger.info('编辑塔罗牌', { id: currentCard.id, name: formData.name, type: formData.type });
    
    // 在实际应用中，这里应该调用API更新数据
    // axios.put(`/api/tarot/cards/${currentCard.id}`, formData);
    setTarotCards(prev => prev.map(card => 
      card.id === currentCard.id 
        ? { ...card, ...formData, updatedAt: new Date().toISOString().split('T')[0] }
        : card
    ));
    setIsEditDialogOpen(false);
  };
  
  // 分页导航
  const renderPagination = () => {
    const pages = [];
    
    // 添加第一页和上一页按钮
    pages.push(
      <PageButton 
        key="prev" 
        disabled={currentPage === 1}
        onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
      >
        <ChevronLeft size={16} />
      </PageButton>
    );
    
    // 添加页码按钮（简单版本，只显示当前页附近的页码）
    const startPage = Math.max(1, currentPage - 2);
    const endPage = Math.min(totalPages, startPage + 4);
    
    for (let i = startPage; i <= endPage; i++) {
      pages.push(
        <PageButton 
          key={i} 
          active={i === currentPage}
          onClick={() => setCurrentPage(i)}
        >
          {i}
        </PageButton>
      );
    }
    
    // 添加下一页和最后一页按钮
    pages.push(
      <PageButton 
        key="next" 
        disabled={currentPage === totalPages}
        onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
      >
        <ChevronRight size={16} />
      </PageButton>
    );
    
    return pages;
  };
  
  if (loading) {
    return (
      <Container>
        <PageTitle>塔罗牌管理</PageTitle>
        <div style={{ textAlign: 'center', padding: '40px', color: '#64748b' }}>
          加载中...
        </div>
      </Container>
    );
  }
  
  return (
    <Container>
      <PageTitle>塔罗牌管理</PageTitle>
      
      <ControlsBar>
        <SearchBar>
          <Search size={16} color="#64748b" />
          <SearchInput 
            placeholder="搜索塔罗牌名称、类型..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </SearchBar>
        
        <div style={{ display: 'flex', gap: '12px' }}>
          <ActionButton variant="secondary" onClick={() => {
            setSearchTerm('');
            setCurrentPage(1);
          }}>
            重置筛选
          </ActionButton>
          <ActionButton variant="primary" onClick={handleAddClick}>
            <Plus size={16} />
            添加塔罗牌
          </ActionButton>
        </div>
      </ControlsBar>
      
      {currentCards.length === 0 ? (
        <div style={{ textAlign: 'center', padding: '60px', color: '#64748b', backgroundColor: 'white', borderRadius: '8px' }}>
          <Info size={48} style={{ marginBottom: '16px' }} />
          <h3 style={{ marginBottom: '8px', color: '#334155' }}>未找到塔罗牌</h3>
          <p>尝试调整搜索条件或添加新的塔罗牌</p>
        </div>
      ) : (
        <CardGrid>
          {currentCards.map(card => (
            <TarotCard key={card.id}>
              <CardImageContainer>
                <CardImage src={card.imageUrl} alt={card.name} />
              </CardImageContainer>
              <CardContent>
                <CardTitle>{card.name}</CardTitle>
                <CardDescription>{card.description}</CardDescription>
                <CardMeta>
                  <span>{card.type}</span>
                  <span>{card.createdAt}</span>
                </CardMeta>
                <CardActions>
                  <button 
                    onClick={() => handleEditClick(card)}
                    style={{
                      padding: '6px 12px',
                      border: 'none',
                      backgroundColor: '#8b5cf6',
                      color: 'white',
                      borderRadius: '4px',
                      cursor: 'pointer',
                      fontSize: '14px'
                    }}
                  >
                    <Edit size={14} style={{ display: 'inline-block', marginRight: '4px' }} />
                    编辑
                  </button>
                  <button 
                    onClick={() => handleDelete(card.id)}
                    style={{
                      padding: '6px 12px',
                      border: 'none',
                      backgroundColor: '#ef4444',
                      color: 'white',
                      borderRadius: '4px',
                      cursor: 'pointer',
                      fontSize: '14px'
                    }}
                  >
                    <Trash2 size={14} style={{ display: 'inline-block', marginRight: '4px' }} />
                    删除
                  </button>
                </CardActions>
              </CardContent>
            </TarotCard>
          ))}
        </CardGrid>
      )}
      
      {totalPages > 1 && (
        <Pagination>
          {renderPagination()}
        </Pagination>
      )}
      
      {/* 添加对话框 */}
      <Dialog open={isAddDialogOpen} onClose={() => setIsAddDialogOpen(false)} maxWidth="md" fullWidth>
        <DialogTitle>添加塔罗牌</DialogTitle>
        <DialogContent>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
            <div style={{ display: 'flex', gap: '20px' }}>
              <div style={{ flex: 1 }}>
                {/* 隐藏的文件输入 */}
                <input
                  type="file"
                  id="imageUpload"
                  onChange={handleFileChange}
                  accept="image/*"
                  style={{ display: 'none' }}
                />
                
                {previewImage ? (
                  <div style={{ position: 'relative' }}>
                    <img 
                      src={previewImage} 
                      alt="Preview" 
                      style={{ 
                        width: '100%', 
                        height: '250px', 
                        objectFit: 'cover', 
                        borderRadius: '8px',
                        border: '2px solid #e2e8f0'
                      }} 
                    />
                    <label 
                      htmlFor="imageUpload"
                      style={{
                        position: 'absolute',
                        bottom: '8px',
                        right: '8px',
                        backgroundColor: 'rgba(139, 92, 246, 0.9)',
                        color: 'white',
                        padding: '8px 16px',
                        borderRadius: '4px',
                        cursor: 'pointer',
                        fontSize: '14px',
                        display: 'flex',
                        alignItems: 'center',
                        gap: '4px'
                      }}
                    >
                      <Upload size={14} />
                      更换图片
                    </label>
                  </div>
                ) : (
                  <label htmlFor="imageUpload">
                    <ImageUploader>
                      <ImageUploaderIcon>
                        <Image size={32} />
                      </ImageUploaderIcon>
                      <ImageUploaderText>点击上传塔罗牌图片</ImageUploaderText>
                      <ImageUploaderText style={{ fontSize: '12px' }}>支持 JPG, PNG, WEBP 格式</ImageUploaderText>
                    </ImageUploader>
                  </label>
                )}
              </div>
              
              <div style={{ flex: 2, display: 'flex', flexDirection: 'column', gap: '16px' }}>
                <div>
                  <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>塔罗牌名称 *</label>
                  <input
                    type="text"
                    name="name"
                    value={formData.name}
                    onChange={handleInputChange}
                    style={{
                      width: '100%',
                      padding: '10px',
                      border: '1px solid #d1d5db',
                      borderRadius: '6px',
                      fontSize: '14px'
                    }}
                    placeholder="输入塔罗牌名称"
                    required
                  />
                </div>
                
                <div>
                  <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>类型 *</label>
                  <select
                    name="type"
                    value={formData.type}
                    onChange={handleInputChange}
                    style={{
                      width: '100%',
                      padding: '10px',
                      border: '1px solid #d1d5db',
                      borderRadius: '6px',
                      fontSize: '14px'
                    }}
                    required
                  >
                    <option value="">请选择类型</option>
                    <option value="大阿卡那">大阿卡那</option>
                    <option value="小阿卡那-权杖">小阿卡那-权杖</option>
                    <option value="小阿卡那-圣杯">小阿卡那-圣杯</option>
                    <option value="小阿卡那-宝剑">小阿卡那-宝剑</option>
                    <option value="小阿卡那-星币">小阿卡那-星币</option>
                  </select>
                </div>
                
                <div>
                  <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>正位含义 *</label>
                  <input
                    type="text"
                    name="meaning"
                    value={formData.meaning}
                    onChange={handleInputChange}
                    style={{
                      width: '100%',
                      padding: '10px',
                      border: '1px solid #d1d5db',
                      borderRadius: '6px',
                      fontSize: '14px'
                    }}
                    placeholder="输入正位含义"
                    required
                  />
                </div>
                
                <div>
                  <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>逆位含义</label>
                  <input
                    type="text"
                    name="reversedMeaning"
                    value={formData.reversedMeaning}
                    onChange={handleInputChange}
                    style={{
                      width: '100%',
                      padding: '10px',
                      border: '1px solid #d1d5db',
                      borderRadius: '6px',
                      fontSize: '14px'
                    }}
                    placeholder="输入逆位含义"
                  />
                </div>
              </div>
            </div>
            
            <div>
              <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>详细描述</label>
              <TextareaAutosize
                name="description"
                value={formData.description}
                onChange={handleInputChange}
                rows={6}
                style={{
                  width: '100%',
                  padding: '10px',
                  border: '1px solid #d1d5db',
                  borderRadius: '6px',
                  fontSize: '14px',
                  resize: 'vertical',
                  minHeight: '120px'
                }}
                placeholder="输入塔罗牌的详细描述和解读"
              />
            </div>
          </div>
        </DialogContent>
        <div style={{ padding: '16px', display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
          <Button onClick={() => setIsAddDialogOpen(false)}>取消</Button>
          <Button onClick={handleAddSave} variant="contained" style={{ backgroundColor: '#8b5cf6' }}>保存</Button>
        </div>
      </Dialog>
      
      {/* 编辑对话框 */}
      <Dialog open={isEditDialogOpen} onClose={() => setIsEditDialogOpen(false)} maxWidth="md" fullWidth>
        <DialogTitle>编辑塔罗牌</DialogTitle>
        <DialogContent>
          {/* 编辑表单内容，与添加表单类似 */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
            <div style={{ display: 'flex', gap: '20px' }}>
              <div style={{ flex: 1 }}>
                {/* 隐藏的文件输入 */}
                <input
                  type="file"
                  id="editImageUpload"
                  onChange={handleFileChange}
                  accept="image/*"
                  style={{ display: 'none' }}
                />
                
                {previewImage ? (
                  <div style={{ position: 'relative' }}>
                    <img 
                      src={previewImage} 
                      alt="Preview" 
                      style={{ 
                        width: '100%', 
                        height: '250px', 
                        objectFit: 'cover', 
                        borderRadius: '8px',
                        border: '2px solid #e2e8f0'
                      }} 
                    />
                    <label 
                      htmlFor="editImageUpload"
                      style={{
                        position: 'absolute',
                        bottom: '8px',
                        right: '8px',
                        backgroundColor: 'rgba(139, 92, 246, 0.9)',
                        color: 'white',
                        padding: '8px 16px',
                        borderRadius: '4px',
                        cursor: 'pointer',
                        fontSize: '14px',
                        display: 'flex',
                        alignItems: 'center',
                        gap: '4px'
                      }}
                    >
                      <Upload size={14} />
                      更换图片
                    </label>
                  </div>
                ) : (
                  <label htmlFor="editImageUpload">
                    <ImageUploader>
                      <ImageUploaderIcon>
                        <Image size={32} />
                      </ImageUploaderIcon>
                      <ImageUploaderText>点击上传塔罗牌图片</ImageUploaderText>
                      <ImageUploaderText style={{ fontSize: '12px' }}>支持 JPG, PNG, WEBP 格式</ImageUploaderText>
                    </ImageUploader>
                  </label>
                )}
              </div>
              
              <div style={{ flex: 2, display: 'flex', flexDirection: 'column', gap: '16px' }}>
                <div>
                  <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>塔罗牌名称 *</label>
                  <input
                    type="text"
                    name="name"
                    value={formData.name}
                    onChange={handleInputChange}
                    style={{
                      width: '100%',
                      padding: '10px',
                      border: '1px solid #d1d5db',
                      borderRadius: '6px',
                      fontSize: '14px'
                    }}
                    placeholder="输入塔罗牌名称"
                    required
                  />
                </div>
                
                <div>
                  <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>类型 *</label>
                  <select
                    name="type"
                    value={formData.type}
                    onChange={handleInputChange}
                    style={{
                      width: '100%',
                      padding: '10px',
                      border: '1px solid #d1d5db',
                      borderRadius: '6px',
                      fontSize: '14px'
                    }}
                    required
                  >
                    <option value="">请选择类型</option>
                    <option value="大阿卡那">大阿卡那</option>
                    <option value="小阿卡那-权杖">小阿卡那-权杖</option>
                    <option value="小阿卡那-圣杯">小阿卡那-圣杯</option>
                    <option value="小阿卡那-宝剑">小阿卡那-宝剑</option>
                    <option value="小阿卡那-星币">小阿卡那-星币</option>
                  </select>
                </div>
                
                <div>
                  <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>正位含义 *</label>
                  <input
                    type="text"
                    name="meaning"
                    value={formData.meaning}
                    onChange={handleInputChange}
                    style={{
                      width: '100%',
                      padding: '10px',
                      border: '1px solid #d1d5db',
                      borderRadius: '6px',
                      fontSize: '14px'
                    }}
                    placeholder="输入正位含义"
                    required
                  />
                </div>
                
                <div>
                  <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>逆位含义</label>
                  <input
                    type="text"
                    name="reversedMeaning"
                    value={formData.reversedMeaning}
                    onChange={handleInputChange}
                    style={{
                      width: '100%',
                      padding: '10px',
                      border: '1px solid #d1d5db',
                      borderRadius: '6px',
                      fontSize: '14px'
                    }}
                    placeholder="输入逆位含义"
                  />
                </div>
              </div>
            </div>
            
            <div>
              <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>详细描述</label>
              <TextareaAutosize
                name="description"
                value={formData.description}
                onChange={handleInputChange}
                rows={6}
                style={{
                  width: '100%',
                  padding: '10px',
                  border: '1px solid #d1d5db',
                  borderRadius: '6px',
                  fontSize: '14px',
                  resize: 'vertical',
                  minHeight: '120px'
                }}
                placeholder="输入塔罗牌的详细描述和解读"
              />
            </div>
          </div>
        </DialogContent>
        <div style={{ padding: '16px', display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
          <Button onClick={() => setIsEditDialogOpen(false)}>取消</Button>
          <Button onClick={handleEditSave} variant="contained" style={{ backgroundColor: '#8b5cf6' }}>保存</Button>
        </div>
      </Dialog>
    </Container>
  );
};

export default TarotManagement;